<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { headersStore } from '@/stores/apiHeader'
const scope_code = computed(() => {
  return headersStore().scope_code
})
const props = defineProps<{
  chartData: any
  nowTile: any
  pastTile: any
}>()
</script>

<template>
  <table class="table-box">
    <thead>
      <tr>
        <th>         {{
            scope_code === '0000111104'
              ? $t('bi_finance_cityname')
              : $t('bi_finance_countryname')
          }}</th>
        <th>{{ pastTile }}</th>
        <th>{{ nowTile }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in props.chartData" :key="item">
        <td>
          {{ item.name }}
        </td>
        <td>{{ item.pastValue }}</td>
        <td>{{ item.nowValue }}</td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss" scoped>
.table-box {
  width: 100%;
  height: 100%;
  tr {
    td {
      width: 33%;
      height: 25px;
      text-align: center;
      vertical-align: middle;
      font-size: 14px;
      border: 1px solid #33ccff;
    }
  }
  th {
    width: 33%;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    border: 1px solid #33ccff;
  }
}
</style>
